<template>
    <div class="special-activity-coupon" v-if="couponList.length > 0 || activityList.length > 0">
        <div class="discount-list-info">
            <div class="coupon-list">
                <ActivityCouponItem v-for="item in couponList" :key="item.id" :label="item.couponType" :value="item.couponText" />
            </div>
            <div class="activity-list">
                <ActivityLabel :activityList="activityValue" />
            </div>
        </div>
        <MiniIcon name="right" />
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { MiniIcon } from '@components/base';
import ActivityCouponItem from '../components/ActivityCouponItem';
import ActivityLabel from '../components/ActivityLabel';
import CouponAndActivity from '../components/CouponAndActivity';
import ModeMixin from '@common/mixin';
export default {
    name: 'SpecialActivity', // 门店活动&优惠券
    mixins: [ModeMixin],
    components: {
        MiniIcon,
        ActivityCouponItem,
        ActivityLabel,
        CouponAndActivity,
    },
    computed: {
        ...mapState({
            activityList: state => state.detail.activityList,
            couponList: state => state.detail.couponList,
        }),
        activityValue() {
            return this.activityList.map(item => item.valueTip);
        },
    },
    methods: {
        openModal() {
            this.$refs.couponAndActivity.show();
        },
    },
};
</script>

<style lang="less">

</style>
